LLOS fonts — Inter / Playfair / JetBrains; no Nunito or Baloo.
Cream background (#fdfcfa), amber chrome (#ea7a27) via the --primary/--accent tokens.
Keep semantic + content colours — success-green, error-red, and game content (RGB lights, palettes) untouched.re-theme the chrome, never the meaning.
No light-gray text — readable contrast everywhere.
B Mobile-first single screen
One viewport, no page scroll — fits 100dvh.
No horizontal overflow at 360 / 390 / 412.
Controls in one row; the feedback sheet never covers the controls it needs.
Always a way to the NEXT frame, independent of the drawer. A persistent Next/Skip is always reachable — closing or ignoring the hint/result drawer must never strand the player.if the only "Next" lives inside the drawer, a kid who closes it is lost — bad design.
But disable Skip during the settle/feedback window. Skip is for *before* answering; once they pick, lock Skip until the next frame so they can't click past the result/hint before seeing it.
Breathing room — buttons/labels not jammed against the board or screen edge.
Slim, consistent header. One ~44px bar (back · title · score) in BOTH the intro and the game — never a tall card eating the viewport, never present in one and missing in the other.
Board-heavy games: design BACKWARDS from mobile, float the chrome. When a big board + controls can't all fit, give the board the screen and make the chrome on-demand: the header floats and reveals near the TOP edge (or a brief peek each round); the action buttons float and reveal when they're needed (e.g. everything's placed) or you reach the BOTTOM edge. Reveal-on-need is mandatory — edge-reveal ALONE makes the CTA undiscoverable ("how do I move on?"). Optimise whitespace toward the play surface — never clip or scroll the board. (Reference: Coordinate Tables.)
Feedback is a PINNED drawer that SLIDES UP (~0.85s), never in the document flow. Inline feedback grows the page → it scrolls → the question gets pushed up/cut off. The drawer must overlay the play area, not push it. Budget the play area for its max state so it always fits one screen.
Every drawer needs a clear way OUT — never a dead-end. A wrong/hint drawer must carry a Try again (closes it so the options are reachable); a final drawer carries Next. "Listen" alone is not a CTA — if the drawer covers the controls and can't be closed, the player is stuck.
C Understand it — explain to a 9-year-old
A game the child can't grasp in one read is a failed game.
Intro screen that says plainly what it is and what to do — concrete, no jargon."Shine coloured torches on a wall and watch them mix" — not "additive RGB synthesis."
The on-screen instruction matches what you actually do.
The puzzles must be genuinely think-worthy for the age — category / logic recognition (3 mammals + 1 bird, 3 foods + 1 drink, 3 numbers + 1 letter), not toddler spot-the-colour (3 apples + 1 banana). The challenge is in the *thinking*, not the eyesight.
Randomise the answer position. Shuffle options every round so the correct/odd one isn't always in the same slot — otherwise kids learn "always tap the last tile" instead of thinking.
D Hints & teaching — for ages 9–12
SETTLE ~3 seconds before the drawer — ALWAYS, correct AND wrong. The result frame (marks · sound · confetti/fold) holds ~3s so the child digests what happened; only THEN does the hint/result drawer slide up. The drawer must never cover the action area on impact.noted ~20×. An instant drawer destroys the "what just happened?" moment. Applies to every result that opens a sheet/drawer.
Wrong answer teaches — a hint that explains the why in kid language, not just "try again"."W is near the end of the alphabet, so it wraps to the start — like a clock past 12."
Tied to the concept, at a 9–12 reading level.
E Reveal — always let them see the answer
"Show me the answer" in every game — fills/marks the correct answer, proves it (fold/mirror/etc.), explains why, and lets them move on.
Wrong → soft "oof" (never a harsh buzzer) + a kind, teaching nudge.
Tap/place → light tick; Reveal/hint → gentle cue.
No success sound on a wrong answer — decide right/wrong first.caught on Fold the Box.
G It actually works — verify, don't assume
Feedback is VISIBLE on screen — check opacity, not just the DOM.a sheet that animates transform but stays opacity:0 rises invisible → "nothing happens." (Fold the Box bug.)
The core visual reads — shapes/faces not invisible, tiny, or clipped.
Every interaction resolves — no dead taps; result always appears.
H Expressive shapes (when used)
From the 5–6★ set, semantically right, fit to frame, classes namespaced.
Dual-tone for emblems; multicolor is fine inside the playful game.
I Process & proof
Backup before first edit (.predeparture-YYYYMMDD).
Comment every edit — date + what + why.
Verify served (curl + grep the change), then browser-walk.
End the report with the full localhost URL.
✗ Known failure modes — every one must be FALSE before "done"
These are the bugs that cost 4× in rework. Check each, every game.
Feedback/drawer rises invisible (opacity:0 with only transform) — looks like nothing happened.
Drawer opens instantly or covers the action area before the result is seen — no ~3s settle.
Blank stare — no coach pointing at the first move; the child doesn't know what to do.
Success sound on a wrong answer (decide right/wrong first).
Closing/dismissing hangs the game — no forward path.
Off-gold accent or stray non-LLOS colour; light-gray text.
Copy too advanced / jargon · no Reveal · no Listen · not truly hybrid.
★ Build on the SHELL — stop retrofitting
Fixing takes 4× creation because we bolt the experience on afterwards. The fix is structural:
Every new game starts from one reusable shell that already bakes in: gold theme + fonts · true-hybrid layout · intro + coach (guided first move) + live action line · the settle→drawer timing inside the feedback function · sound cues + confetti · Reveal · Listen · one-row controls · hub↔game nav/back.
Creation = plug the game's own mechanic into the shell. The experience is inherited, so this checklist is green by construction — not re-fixed game by game. That's how we scale to a million.
Definition of done: A → I all true, every failure mode FALSE, built on the shell, browser-walked — and a stuck 9-year-old can start, understand, see the result settle, get a teaching hint, reveal the answer, and feel celebrated — on the gold theme, one screen, mobile and desktop.